/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* vue */
import { defineComponent, PropType } from 'vue'
/* types */
import { SettingGPTRobotModuleType } from "@src/modules/setting/gpt/types";

enum SettingGPTRobotViewNameEventEnum {
  Input = 'input'
}

export default defineComponent({
  name: ComponentNameEnum.SettingGPTRobotViewName,
  props: {
    value: {
      type: String,
      default: ''
    },
    onInput: {
      type: Function
    }
  },
  data() {
    return {
      insideValue: '',
    }
  },
  computed: {
    title(): string {
      return '机器人名称'
    },
    placeholder(): string {
      return '请填写机器人名称'
    },
    model(): Record<string, any> {
      return {
        name: this.insideValue
      }
    },
    rules(): Record<string, any> {
      return {
        name: [
          { required: true, message: '请填写' + this.title, trigger: 'blur' },
          { required: true, message: '请填写' + this.title, trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    value(value) {
      this.insideValue = value
    }
  },
  methods: {
    clear() {
      const emptyValue = ''
      this.onChangeHandler(emptyValue)
    },
    emitInput(value: string) {
      this.$emit(SettingGPTRobotViewNameEventEnum.Input, value)
    },
    onChangeHandler(value: string) {
      const _value = value.trim()
      this.insideValue = _value
      this.emitInput(_value)
    },
    onFormInputHandler() {
      
    },
    clearValidate() {
      // @ts-ignore
      return this.$refs.NameFormItem?.clearValidate()
    },
    validate() {
      // @ts-ignore
      return this.$refs.form?.validate()
    }
  },
  render() {
    
    const attrs = {
      props: {
        model: this.model
      }
    }
    
    return (
      <div class={ComponentNameEnum.SettingGPTRobotViewName}>
        
        <el-form 
          label-position="top"
          ref="form"
          rules={this.rules}
          {...attrs}
          onInput={this.onFormInputHandler}
          nativeOnSubmit={(event: any) => event.preventDefault()}
        >
          <el-form-item
            ref="NameFormItem"
            prop="name"
            label={this.title}
          >
            <el-input
              maxlength={20}
              value={this.insideValue}
              placeholder={this.placeholder}
              clearable
              onClear={this.clear}
              onInput={this.onChangeHandler}
            />
          </el-form-item>
        </el-form>
        
      </div>
    )
  }
})